<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
		<style>
			.main_container{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				width: 900px;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			}
			.table{
				width: 100%;
				border-collapse: collapse;
				color: #606266;
			}
			.table th, td {
				  border: 1px solid #d2d6de; /* 表头和单元格的边框 */
				  padding: 4px;
				  justify-content: center;
				  align-items: center;
				  text-align: center;
			}
			
			.table thead{
				background-color: #1e9fff;
				color: white;
			}
			
			tbody>tr:hover{
				background-color: #eee;
			}
			
			.tooltip {
			    position: relative;
			}
			.tooltip::before {
				display: block;
				content: attr(data-tip);
			    width: auto;
				min-width: 120px;
			    background-color: black;
			    color: #fff;
			    text-align: center;
			    border-radius: 6px;
			    padding: 5px 3px;
			    position: absolute;
			    z-index: 1;
			    bottom: 120%;
			    left: 50%;
			    margin-left: -60px;
			}
			.tooltip::after {
			     content: "";
			     position: absolute;
			     top: -20%;
			     left: 50%;
			     margin-left: -5px;
			     border-width: 5px;
			     border-style: solid;
			     border-color: black transparent transparent transparent;
			}
			
			/* 初始状态下不显示 */
			.tooltip::after,.tooltip::before{
				display:none;
			}
			
			/* 选中后显示 */
			.tooltip:hover::after,.tooltip:hover::before  {
			   display: block;
			}
			
			.table-content{
				display: block;
				width: 200px;
				white-space: nowrap; /* 文本不换行 */
				overflow: hidden; /* 溢出内容隐藏 */
				text-overflow: ellipsis; /* 溢出内容显示省略号 */
			}
			
			.fixed{
				background-color: #eee;
			}
			
		</style>
	</head>
	<body>
		<div class="main_container">
			<table class="table">
				<thead>
					<tr>
						<th>姓名</th>
						<th>年龄</th>
						<th>地址</th>
						<th>备注</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="tooltip" data-tip="李四"><a class="table-content">李四</a></td>
						<td class="tooltip" data-tip="18"><a class="table-content">18</a></td>
						<td class="tooltip" data-tip="武汉"><a class="table-content">武汉</a></td>
						<td class="tooltip" data-tip="备注"><a class="table-content">备注</a></td>
					</tr>
					<tr>
						<td class="tooltip" data-tip="王五"><a class="table-content">王五</a></td>
						<td class="tooltip" data-tip="17"><a class="table-content">17</a></td>
						<td class="tooltip" data-tip="湖北"><a class="table-content">湖北</a></td>
						<td class="tooltip" data-tip="很长长长长长长长长长长长长的备注"><a class="table-content">很长长长长长长长长长长长长的备注</a></td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<script>
			let table=document.querySelector(".main_container tbody")
			let tableChild=table.childNodes;
			let nodes=[];
			tableChild.forEach(node=>{
				const isNode = node instanceof Node;
				if(isNode){
					const hasAttributeMethod = typeof node.getAttribute === "function"
					if(hasAttributeMethod){
						nodes.push(node);
					}
				}
			})
			nodes.forEach(node=>{
				node.addEventListener('click', () => {
				  nodes.forEach(b => b.classList.remove('fixed'));
				  node.classList.add('fixed');
				});
			})
			
		</script>
		
	</body>
</html>